<template>
    <div class="container">
        <div class="header">
            <!-- 搜索框 -->
            <div class="search-filters">
                <input v-model="searchFilters.commentId" placeholder="评论ID" />
                <input v-model="searchFilters.requestId" placeholder="请求ID" />
                <input v-model="searchFilters.userId" placeholder="用户ID" />
                <input v-model="searchFilters.adminId" placeholder="管理员ID" />
                <input v-model="searchFilters.comment" placeholder="评论内容" />
                <button @click="fetchData" class="search-button">搜索</button>
            </div>

            <button @click="fetchData" class="refresh-button">刷新</button>
            <button @click="deleteSelected" :disabled="!selectedRows.length" class="delete-button">删除</button>
        </div>

        <table class="data-table">
            <thead>
                <tr>
                    <th><input type="checkbox" @change="toggleSelectAll" :checked="isAllSelected" /></th>
                    <th>评论ID</th>
                    <th>请求ID</th>
                    <th>用户ID</th>
                    <th>管理员ID</th>
                    <th>评论内容</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in paginatedData" :key="item.id">
                    <td>
                        <input type="checkbox" :value="item.id" v-model="selectedRows" @click.stop />
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.request_id }}</td>
                    <td>{{ item.user_id }}</td>
                    <td>{{ item.admin_id }}</td>
                    <td>
                        <span @click="toggleFullDescription(item.id)" class="description-text">
                            {{ isExpanded(item.id) ? item.comment : getSubstring(item.comment, 15) }}
                        </span>
                    </td>
                    <td>{{ formatDate(item.created_at) }}</td>
                    <td>{{ formatDate(item.updated_at) }}</td>
                </tr>
            </tbody>
        </table>

        <div class="pagination">
            <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
            <span>第 {{ currentPage }} 页，共 {{ totalItems }} 条</span>
            <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
        </div>

        <confirmation-dialog
            v-if="showConfirmationDialog"
            @confirm="confirmDelete"
            @cancel="cancelDelete"
        />
    </div>
</template>

<script>
import ConfirmationDialog from '../components/ConfirmationDialog.vue'; // 确认对话框组件

export default {
    components: {
        ConfirmationDialog,
    },
    data() {
        return {
            data: [], // 存储评论数据
            selectedRows: [], // 存储选中的行
            currentPage: 1,
            itemsPerPage: 10,
            totalItems: 0, // 评论总数
            showConfirmationDialog: false,
            searchFilters: { // 搜索条件
                commentId: '',
                requestId: '',
                userId: '',
                adminId: '',
                comment: '',
            },
            expandedCommentId: null, // 当前展开的评论 ID
        };
    },
    computed: {
        // 分页数据
        paginatedData() {
            return this.data;
        },
        // 总页数
        totalPages() {
            return Math.ceil(this.totalItems / this.itemsPerPage);
        },
        // 是否全选
        isAllSelected() {
            return this.selectedRows.length === this.paginatedData.length;
        },
    },
    methods: {
        // 获取评论数据
        fetchData() {
            const url = `http://localhost:3000/api/request_comments?page=${this.currentPage}&limit=${this.itemsPerPage}` +
                `&commentId=${this.searchFilters.commentId}` +
                `&requestId=${this.searchFilters.requestId}` +
                `&userId=${this.searchFilters.userId}` +
                `&adminId=${this.searchFilters.adminId}` +
                `&comment=${this.searchFilters.comment}`;
            console.log('请求的 URL:', url); // 打印完整的请求 URL

            fetch(url)
                .then(response => {
                    console.log('响应状态:', response.status, response.statusText); // 打印响应状态码和状态文本

                    if (!response.ok) {
                        // 如果响应状态码不是 200，尝试解析响应内容
                        return response.json().then(errorData => {
                            console.error('响应内容:', errorData); // 打印响应内容
                            throw new Error(`网络响应不正常: ${response.status} ${response.statusText}`);
                        });
                    }
                    return response.json();
                })
                .then(result => {
                    console.log('获取的数据:', result); // 打印获取的数据
                    this.data = result.data;
                    this.totalItems = result.total;
                    this.selectedRows = []; // 清空选中的行
                })
                .catch(error => {
                    console.error('获取评论数据失败:', error);
                    alert('获取评论数据失败，请检查控制台日志！');
                });
        },
        // 全选/取消全选
        toggleSelectAll(event) {
            if (event.target.checked) {
                this.selectedRows = this.paginatedData.map(item => item.id);
            } else {
                this.selectedRows = [];
            }
        },
        // 删除选中的评论
        deleteSelected() {
            if (this.selectedRows.length > 0) {
                this.showConfirmationDialog = true; // 显示确认对话框
            }
        },
        // 确认删除
        confirmDelete() {
            fetch('http://localhost:3000/api/request_comments', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    commentIds: this.selectedRows, // 选中的评论 ID 数组
                }),
            })
            .then(response => {
                console.log('删除响应状态:', response.status, response.statusText); // 打印删除响应状态

                if (!response.ok) {
                    return response.json().then(errorData => {
                        console.error('删除响应内容:', errorData); // 打印删除响应内容
                        throw new Error(`删除失败: ${response.status} ${response.statusText}`);
                    });
                }
                return response.json();
            })
            .then(result => {
                console.log('删除结果:', result); // 打印删除结果
                // 更新前端数据
                this.fetchData(); // 重新获取数据
                this.selectedRows = []; // 清空选中的行
                this.showConfirmationDialog = false; // 关闭对话框
                alert(result.message); // 显示成功消息
            })
            .catch(error => {
                console.error('删除失败:', error);
                alert('删除失败，请重试！');
            });
        },
        // 取消删除
        cancelDelete() {
            this.showConfirmationDialog = false; // 关闭对话框
        },
        // 上一页
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.fetchData(); // 重新获取数据
            }
        },
        // 下一页
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
                this.fetchData(); // 重新获取数据
            }
        },
        // 格式化日期
        formatDate(date) {
            return new Date(date).toLocaleString();
        },
        // 截取字符串
        getSubstring(text, length) {
            return text.length > length ? text.substring(0, length) + '...' : text;
        },
        // 切换完整内容显示
        toggleFullDescription(id) {
            if (this.expandedCommentId === id) {
                // 如果当前已经展开，则关闭
                this.expandedCommentId = null;
            } else {
                // 否则展开
                this.expandedCommentId = id;
            }
        },
        // 判断当前评论是否展开
        isExpanded(id) {
            return this.expandedCommentId === id;
        },
    },
    mounted() {
        this.fetchData(); // 组件挂载时获取数据
    },
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 950px;
    margin-bottom: 120px;
    background-color: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.search-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-filters input {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 34px; /* 固定高度 */
    transition: border-color 0.3s;
}

.search-filters input:hover {
    border-color: #007bff;
}

/* 按钮的通用样式 */
button {
    border: none;
    border-radius: 4px;
    padding: 8px 12px; /* 统一内边距 */
    margin: 0 3px; /* 按钮之间添加3px的间隔 */
    cursor: pointer;
    transition: background-color 0.3s;
    height: 34px; /* 统一高度 */
}

/* 搜索和刷新按钮的样式 */
.search-button,
.refresh-button {
    background-color: #007bff; /* 蓝色背景 */
    color: white;
}

.search-button:hover,
.refresh-button:hover {
    background-color: #0056b3; /* 悬停时深蓝色背景 */
}

/* 删除按钮的样式 */
.delete-button {
    background-color: #dc3545; /* 红色背景 */
    color: white;
}

.delete-button:hover {
    background-color: #a71d2a; /* 悬停时深红色背景 */
}

/* 分页按钮样式 */
.pagination button {
    background-color: #007bff;
    color: white;
    padding: 8px 12px; /* 统一内边距 */
    cursor: pointer;
    transition: background-color 0.3s;
    height: 34px; /* 统一高度 */
}

.pagination button:hover {
    background-color: #0056b3;
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 分页区域样式 */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 按钮和文本之间的间距 */
}

.pagination span {
    display: inline-block; /* 确保 span 是块级元素 */
    vertical-align: middle; /* 垂直居中对齐 */
    line-height: 34px; /* 与按钮高度一致 */
}

/* 表格样式 */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.data-table th {
    background-color: #f2f2f2;
}

/* 描述文本样式 */
.description-text {
    cursor: pointer;
}
</style>